<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Jessica pro btn demo</title>
    <link rel="stylesheet" href="./demo.css">
    <script src="./vconsole.js"></script>
    <script src="./js/jessibuca-pro-demo.js"></script>
    <style>
        .container-shell:before {
            content: "jessibuca pro btn demo player";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="mseSupport264" style="color: green;display: none">支持MSE H264解码；</span>
                <span id="mseSupport" style="color: green;display: none">支持MSE H265解码；</span>
                <span id="mseNotSupport264" style="color: red;display: none">不支持MSE H264解码；</span>
                <span id="mseNotSupport"
                      style="color: red;display: none">不支持MSE H265解码,会自动切换成wasm解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
                <span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
                <span id="wcsNotSupport264"
                      style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
                <span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wasmSupport" style="color: green;display: none">支持WASM解码；</span>
                <span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码</span>
                <span id="wasmNotSupport" style="color: red;display: none">不支持WASM解码</span>
                <span id="simdNotSupport"
                      style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div><input
                type="checkbox"
                checked
                id="useMSE"
            /><span>MediaSource</span>
                <input
                    type="checkbox"
                    id="useWCS"
                /><span>Webcodec</span>
                <input
                    type="checkbox"
                    id="useWASM"
                /><span>WASM</span>
                <input
                    type="checkbox"
                    id="useSIMD"
                /><span>WASM(SIMD)</span> <span style="color: green">默认使用wasm解码器</span>
            </div>
        </div>
        <div class="input">
            <span>渲染标签：</span>
            <select id="renderDom" onchange="replay()">
                <option value="video" selected>video</option>
                <option value="canvas">canvas</option>
            </select>

            <span>canvas渲染技术：</span>
            <select id="isUseWebGPU" onchange="replay()">
                <option value="webgl">webgl</option>
                <option value="webgpu" selected>webgpu</option>
            </select>
            <span id="supportWebgpu"></span>
        </div>
        <div class="input">
            <div>
                <span>缓存时长：</span>
                <input placeholder="单位：秒" type="text" id="videoBuffer" style="width: 50px" value="0.2">秒
                <span>缓存延迟(延迟超过会触发丢帧)：</span>
                <input placeholder="单位：秒" type="text" id="videoBufferDelay" style="width: 50px" value="1">秒
                <button id="replay">重播</button>
            </div>
        </div>
        <div class="input">
            <div>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="demuxUseWorker"
                /><span>硬解码(MediaSource，Webcodec)worker解封装</span>
            </div>
        </div>
        <div class="input">
            <div>
                <span style="color: red">按钮配置(勾选会触发重播):</span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="playBtn"
                /><span>播放</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="fullscreen"
                /><span>全屏</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="screenshot"
                /><span>截图</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="audio"
                /><span>声音</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="record"
                /><span>录制</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="ptz"
                /><span>PTZ</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="zoom"
                /><span>电子放大</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="quality"
                /><span>分辨率</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="scale"
                /><span>显示模式</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="performance"
                /><span>性能面板</span>
                <span> | </span>

            </div>
        </div>
        <div class="input">
            <div>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="close"
                /><span>关闭按钮</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="extendBtn"
                /><span>自定义按钮</span>
                <span> | </span>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="speed"
                /><span>网速</span>
                <span> | </span>
            </div>
        </div>

        <div class="input">
            <div>
                <span style="color: #3c8b3c">其他操作：</span>
                <span>画面旋转</span>
                <select id="rotate" onchange="rotateChange()">
                    <option value="0">0</option>
                    <option value="90">90</option>
                    <option value="18">180</option>
                    <option value="270">270</option>
                </select>
                <span> | </span>
                <span>画面镜像</span>
                <select id="mirrorRotate" onchange="mirrorRotateChange()">
                    <option value="none">无</option>
                    <option value="level">水平</option>
                    <option value="vertical">垂直</option>
                </select>
                <span> | </span>
                <span>宽高比</span>
                <select id="aspectRatio" onchange="aspectRatioChange()">
                    <option value="">无</option>
                    <option value="16:9">16:9</option>
                    <option value="4:3">4:3</option>
                </select>
            </div>
        </div>

        <div class="input">
            <div>输入URL：</div>
            <input
                autocomplete="on"
                id="playUrl"
                value=""
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input">
            <div>
                <button onclick="toggleControlExtendBtn()">toggle自定义按钮激活状态</button>
                <button onclick="toggleControlExtendBtn(true)">自定义按钮激活</button>
                <button onclick="toggleControlExtendBtn(false)">自定义按钮取消激活</button>
                <button onclick="toggleControlDom()">toggle控制栏</button>
            </div>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
            <span class="fps-inner"></span>
        </div>
    </div>
</div>

<script src="./demo.js"></script>
<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $fps = document.querySelector('.fps-inner');
    var $useMSE = document.getElementById('useMSE');
    var $useSIMD = document.getElementById('useSIMD');
    var $useWASM = document.getElementById('useWASM');
    var $useWCS = document.getElementById('useWCS');
    var $videoBuffer = document.getElementById('videoBuffer');
    var $videoBufferDelay = document.getElementById('videoBufferDelay');
    var $replay = document.getElementById('replay');
    var $renderDom = document.getElementById('renderDom');
    var $isUseWebGPU = document.getElementById('isUseWebGPU');
    var $demuxUseWorker = document.getElementById('demuxUseWorker');

    var $fullscreen = document.getElementById('fullscreen');
    var $screenshot = document.getElementById('screenshot');
    var $audio = document.getElementById('audio');
    var $record = document.getElementById('record');
    var $ptz = document.getElementById('ptz');
    var $zoom = document.getElementById('zoom');
    var $quality = document.getElementById('quality');
    var $scale = document.getElementById('scale');
    var $performance = document.getElementById('performance');
    var $close = document.getElementById('close');
    var $extendBtn = document.getElementById('extendBtn');
    var $speed = document.getElementById('speed');
    var $play = document.getElementById('playBtn');

    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;

    function create() {

        const configBtns = {
            play: $play.checked === true,
            fullscreen: $fullscreen.checked === true,
            screenshot: $screenshot.checked === true,
            audio: $audio.checked === true,
            record: $record.checked === true,
            ptz: $ptz.checked === true,
            zoom: $zoom.checked === true,
            quality: $quality.checked === true,
            scale: $scale.checked === true,
            performance: $performance.checked === true,
            close: $close.checked === true,
        }
        let extendOperateBtns = [];
        if ($extendBtn.checked === true) {
            extendOperateBtns = [
                {
                    name: 'testBtn',
                    index: 2,
                    createdMoment: 'loading', // init,loading,playing,
                    icon: '',
                    iconHover: '',
                    iconTitle: '测试hover',
                    click: () => {
                        console.log('点击了test按钮');
                    }
                },
                {
                    name: 'testBtn2',
                    index: 3,
                    createdMoment: 'created',
                    icon:'',
                    iconHover:'',
                    iconTitle: '测试hover2 状态',
                    click: () => {
                        console.log('点击了testBtn2按钮');
                    },
                    activeIcon:'',
                    activeIconHover:'',
                    activeIconTitle: '测试active2 状态',
                    activeClick: () => {
                        console.log('点击了testBtn2 active 按钮');
                    }
                }
            ]
        }


        jessibuca = new JessibucaPro({
            container: $container,
            videoBuffer: Number($videoBuffer.value), // 缓存时长
            videoBufferDelay: Number($videoBufferDelay.value), // 1000s
            decoder: './js/decoder-pro.js',
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            debugLevel: "debug",
            useMSE: $useMSE.checked === true,
            useSIMD: $useSIMD.checked === true,
            useWCS: $useWCS.checked === true,
            showBandwidth: $speed.checked === true, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            operateBtns: configBtns,
            extendOperateBtns: extendOperateBtns,
            timeout: 10000,
            heartTimeoutReplayUseLastFrameShow: true,
            audioEngine: "worklet",
            qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
            heartTimeout: 10,
            ptzClickType: 'mouseDownAndUp',
            ptzZoomShow: true,
            ptzMoreArrowShow: true,
            ptzApertureShow: true,
            ptzFocusShow: true,
            useCanvasRender: $renderDom.value === 'canvas',
            useWebGPU: $isUseWebGPU.value === 'webgpu',
            demuxUseWorker: $demuxUseWorker.checked === true,
            watermarkConfig:[
                {
                    text:{
                        content:'jessibuca-pro',
                        fontSize:'14',
                        color:'#000'
                    },
                    top:'50%',
                    left:'50%',
                }
            ],
            // controlHtml: '<div>我是 <span style="color: red">test</span>文案</div>',
            // audioEngine:"worklet",
            // isFlv: true
        },);
        jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error) => {
            jessibuca.showErrorMessageTips('播放异常：' + error);
        })

        jessibuca.on('ptz', (arrow) => {
            // console.log('ptz', arrow);
        })

        jessibuca.on('streamQualityChange', (value) => {
            console.log('streamQualityChange', value);
        })

        jessibuca.on('timeUpdate', (value) => {
            // console.log('timeUpdate', value);
        })

        jessibuca.on('stats', (stats) => {
            // console.log('stats', stats);
            $fps.textContent = `FPS: ${stats.fps} DFPS: ${stats.dfps}`
        })
        jessibuca.on(JessibucaPro.EVENTS.crashLog,(log)=>{
            console.error('crashLog',log)
        })


        jessibuca.on('close', () => {
            //  需要延迟触发重播。
            setTimeout(() => {
                jessibuca = null;
                create();
            }, 1 * 1000)
        })


        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $destroy.style.display = 'none';
        $fps.textContent = '';
    }


    create();

    function play() {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href).then(() => {
                $player.style.display = 'none';
                $pause.style.display = 'inline-block';
                $destroy.style.display = 'inline-block';
                notifySuccess('播放成功');
            }).catch((error) => {
                jessibuca.showErrorMessageTips(error.toString());
            });
        }
        else{
            jessibuca.showErrorMessageTips('播放地址不能为空');
        }
    }


    function replay() {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
                play();
            });
        } else {
            create();
            play();
        }
    }

    $replay.addEventListener('click', function () {
        replay();
    })

    $player.addEventListener('click', function () {
        play();
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $fps.textContent = '';
        jessibuca.pause();
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
            });
        } else {
            create();
        }

    })

    $useMSE.addEventListener('click', function () {
        const checked = $useMSE.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWCS.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useSIMD.addEventListener('click', function () {
        const checked = $useSIMD.checked;
        if (checked) {
            $useMSE.checked = false
            $useWCS.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWCS.addEventListener('click', function () {
        const checked = $useWCS.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWASM.addEventListener('click', function () {
        const checked = $useWASM.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
            $useWCS.checked = false
        }
        replay();
    })

    function rotateChange() {
        if (jessibuca) {
            const $rotate = document.getElementById('rotate');
            const rotate = Number($rotate.value);
            jessibuca.setRotate(rotate);
        }
    }

    function mirrorRotateChange() {
        if (jessibuca) {
            const $mirrorRotate = document.getElementById('mirrorRotate');
            const mirror = $mirrorRotate.value;
            jessibuca.setMirrorRotate(mirror);
        }
    }

    function aspectRatioChange() {
        if (jessibuca) {
            const $aspectRatio = document.getElementById('aspectRatio');
            const aspectRatio = $aspectRatio.value;
            jessibuca.setAspectRatio(aspectRatio);
        }
    }

    function toggleControlExtendBtn(isActive){
        if(jessibuca){
            jessibuca.toggleControlExtendBtn('testBtn2',isActive);
            const _isActive = jessibuca.getControlExtendBtnActive('testBtn2');
            console.log('isActive',_isActive);
        }
    }

    function toggleControlDom(){
        if(jessibuca){
            jessibuca.toggleControlBar();
        }
    }

</script>

</body>
</html>
